<template>
	<div class="member">
		<a-breadcrumb style="margin: 16px 0">
			<a-breadcrumb-item>主页</a-breadcrumb-item>
			<a-breadcrumb-item>家族成员管理</a-breadcrumb-item>
		</a-breadcrumb>
		<a-table :columns="columns" :data-source="data" :pagination="pagination" :loading="loading" @change="handleTableChange">
			<template #gender="{ record }">
				<a-tag color="#108ee9" v-if="record.gender == 1"><ManOutlined /> 男 </a-tag>
				<a-tag color="pink" v-else><WomanOutlined /> 女 </a-tag>
			</template>
			<template #father="{ record }">
				<span v-if="record.father_name == ''">暂无</span>
				<span v-else>{{record.father_name}}</span>
			</template>
			<template #mother="{ record }">
				<span v-if="record.mother_name == ''">暂无</span>
				<span v-else>{{record.mother_name}}</span>
			</template>
			<template #mate_name="{ record }">
				<span v-if="record.mate_id == 0">暂无</span>
				<span v-else>{{record.mate_name}}</span>
			</template>
			<template #operation="{ record }">
				<a-button type="primary" style="margin-right: 10px" size="small" @click="openDrawer(record)">查看个人资料</a-button>
				<a-button type="primary" style="margin-right: 10px" size="small" @click="openEditForm(record)">编辑</a-button>
				<a-button type="primary" size="small" danger @click="del(record)">删除</a-button>
			</template>
		</a-table>
		<EditForm :visible="editForm" :userinfo="editFormObj" @change="setEditForm"></EditForm>

		<a-drawer
			title="个人资料"
			placement="right"
			:closable="false"
			width="400"
			v-model:visible="drawerVisible"
		>
			<a-form layout="horizontal" :model="detailInfo">

				<a-form-item label="姓名" name="father_id">
					<span>{{detailInfo.nickname}}</span>
				</a-form-item>

				<a-form-item label="性别" name="father_id">
					<a-tag color="#108ee9" v-if="detailInfo.gender == 1"><ManOutlined /> 男 </a-tag>
					<a-tag color="pink" v-else><WomanOutlined /> 女 </a-tag>
				</a-form-item>

				<a-form-item label="出生日期" name="father_id">
					<span>{{detailInfo.birthdate}}</span>
				</a-form-item>

				<a-form-item label="父亲" name="father_id">
					<span v-if="detailInfo.father_name == ''">暂无</span>
					<span v-else>{{detailInfo.father_name}}</span>
				</a-form-item>

				<a-form-item label="母亲" name="father_id">
					<span v-if="detailInfo.mother_name == ''">暂无</span>
					<span v-else>{{detailInfo.mother_name}}</span>
				</a-form-item>

				<a-form-item label="兄弟姐妹" name="father_id">
					<span v-if="brotherList.length == 0">暂无</span>
					<span v-else v-for="item in brotherList">
						<a-tag color="#108ee9" v-if="item.gender == 1"><ManOutlined /> {{item.nickname}} </a-tag>
						<a-tag color="pink" v-else><WomanOutlined /> {{item.nickname}} </a-tag>
					</span>
				</a-form-item>

				<a-form-item label="伴侣" name="father_id">
					<span v-if="detailInfo.mate_id == 0">未婚</span>
					<span v-else>{{detailInfo.mate_name}}</span>
				</a-form-item>

				<a-form-item label="结婚日期" name="father_id">
					<span v-if="detailInfo.marriagedate == ''">未婚</span>
					<span v-else>{{detailInfo.marriagedate}}</span>
				</a-form-item>

				<a-form-item label="简介" name="father_id">
					<span>{{detailInfo.intro}}</span>
				</a-form-item>

			</a-form>

		</a-drawer>
	</div>
</template>

<script>
import { ManOutlined, PlusCircleOutlined, WomanOutlined } from '@ant-design/icons-vue'
import { getList, delMember } from "@/request/api";
import { Modal, message } from 'ant-design-vue';
import EditForm from "../components/EditForm"
const columns = [
	{
		title: '姓名',
		dataIndex: 'nickname',
		key: 'nickname',
	},
	{
		title: '性别',
		dataIndex: 'gender',
		key: 'gender',
		slots: { customRender: 'gender' },
	},
	{
		title: '出生日期',
		dataIndex: 'birthdate',
		key: 'birthdate',
	},
	{
		title: '父亲',
		dataIndex: 'father',
		key: 'father',
		slots: { customRender: 'father' },
	},
	{
		title: '母亲',
		dataIndex: 'mother',
		key: 'mother',
		slots: { customRender: 'mother' },
	},
	{
		title: '伴侣',
		dataIndex: 'mate_name',
		key: 'mate_name',
		slots: { customRender: 'mate_name' },
	},
	{
		title: '操作',
		key: 'operation',
		dataIndex: 'operation',
		slots: { customRender: 'operation' },
	},
];

export default {
	name: "Member",
	data() {
		return {
			data: [],
			columns,
			pageSize: 1,
			loading: false,
			pagination: {
				total: 0,
				size:'large',
				defaultPageSize: 10,
				current: 1,
				pageSize: 10,
				showTotal: total => `共 ${total} 条数据`
			},
			editForm: false,
			editFormObj: {},
			drawerVisible: false,
			detailInfo: {},
			brotherList: []
		}
	},
	created() {
		this.getList()
	},
	methods: {
		handleTableChange: function (pagination, filters, sorter) {
			this.pagination = pagination
			this.getList()
		},
		del(obj) {
			let that = this
			Modal.warning({
				title: () => '重要提示',
				content: () => '你确认要删除这条数据吗？',
				closable: true,
				okText: () => "确定",
				onOk() {
					that.loading = true
					delMember({member_id: obj.id}).then(res => {
						if (res.code == 0) {
							that.loading = false
							message.success('删除成功');
							that.getList()
						} else {
							that.loading = false
							message.error('删除失败');
						}
					})
				},
			});
		},
		getList() {
			this.loading = true
			getList({page: this.pagination.current, limit: this.pagination.pageSize}).then(res => {
				if (res.code == 0) {
					this.loading = false
					this.data = res.data.list
					this.pagination.total = res.data.count
				}
			})
		},
		openEditForm: function(obj) {
			this.editFormObj = obj
			this.editForm = true
		},
		setEditForm: function (status) {
			this.editForm = status
			this.getList()
		},
		openDrawer: function(obj) {
			this.getBrother(obj)
			this.drawerVisible = true
			this.detailInfo = obj
		},
		getBrother: function (obj) {
			if (obj.father_id != 0 && obj.mother_id != 0) {
				let that = this
				that.brotherList = []
				getList({page: 1, limit: 1000}).then(res => {
					if (res.code == 0) {
						res.data.list.forEach(function (item) {
							if (obj.id != item.id && obj.father_id == item.father_id && obj.mother_id == item.mother_id) {
								that.brotherList.push(item)
							}
						})
					}
				})
			}
		}
	},
	components: {
		ManOutlined,
		PlusCircleOutlined,
		WomanOutlined,
		EditForm
	}
}
</script>

<style scoped>

</style>
